<!DOCTYPE html>
<html>
<head>
    <title>Diagrama de Termodinámica</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="320"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1;

    // --- Definir Geometría ---
    const yTop = 80;
    const yBottom = 180;
    const yCenter = (yTop + yBottom) / 2;

    // Carcasa del cilindro fijo izquierdo
    const leftWallX = 40;
    const leftCylEndX = 220; // Fin de la estructura fija

    // Carcasa del cilindro fijo derecho
    const rightCylStartX = 300; // Inicio de la estructura fija
    const rightWallX = 480;

    // Ensamblaje de pistón móvil
    const piston1X = 200; // Posición del pistón izquierdo
    const piston2X = 320; // Posición del pistón derecho

    // --- Dibujar Cilindro Fijo Izquierdo ---
    ctx.beginPath();
    ctx.moveTo(leftCylEndX, yTop);
    ctx.lineTo(leftWallX, yTop);
    ctx.lineTo(leftWallX, yBottom);
    ctx.lineTo(leftCylEndX, yBottom);
    ctx.stroke();

    // Dibujar Sombreado para el Cilindro Izquierdo
    ctx.beginPath();
    ctx.lineWidth = 0.8;
    const hatchSpacing = 10;
    const hatchLength = 10;
    // Sombreado superior (estilo: ////)
    for (let x = leftWallX; x <= leftCylEndX; x += hatchSpacing) {
        ctx.moveTo(x, yTop);
        ctx.lineTo(x + hatchLength, yTop - hatchLength);
    }
    // Sombreado inferior (estilo: \\\\ relativo a la pared)
    for (let x = leftWallX; x <= leftCylEndX; x += hatchSpacing) {
        ctx.moveTo(x, yBottom);
        ctx.lineTo(x + hatchLength, yBottom + hatchLength);
    }
    // Sombreado de la pared izquierda (estilo: \\\\ relativo a la pared)
    for (let y = yTop; y <= yBottom; y += hatchSpacing) {
        ctx.moveTo(leftWallX, y);
        ctx.lineTo(leftWallX - hatchLength, y + hatchLength);
    }
    ctx.stroke();

    // --- Dibujar Cilindro Fijo Derecho ---
    ctx.beginPath();
    // La imagen muestra una pared doble, indicando una pared diatérmica.
    const thickness = 4;
    ctx.lineWidth = 1;
    // Límite exterior
    ctx.moveTo(rightCylStartX, yTop - thickness);
    ctx.lineTo(rightWallX + thickness, yTop - thickness);
    ctx.lineTo(rightWallX + thickness, yBottom + thickness);
    ctx.lineTo(rightCylStartX, yBottom + thickness);
    // Límite interior
    ctx.moveTo(rightCylStartX, yTop);
    ctx.lineTo(rightWallX, yTop);
    ctx.lineTo(rightWallX, yBottom);
    ctx.lineTo(rightCylStartX, yBottom);
    // Conectar la apertura
    ctx.moveTo(rightCylStartX, yTop - thickness);
    ctx.lineTo(rightCylStartX, yBottom + thickness);
    ctx.stroke();

    // --- Dibujar Ensamblaje de Pistón Móvil (Estructura en H) ---
    ctx.beginPath();
    ctx.lineWidth = 2;
    // Pistón izquierdo
    ctx.moveTo(piston1X, yTop);
    ctx.lineTo(piston1X, yBottom);
    // Pistón derecho
    ctx.moveTo(piston2X, yTop);
    ctx.lineTo(piston2X, yBottom);
    // Varilla de conexión
    ctx.moveTo(piston1X, yCenter);
    ctx.lineTo(piston2X, yCenter);
    ctx.stroke();

    // --- Añadir Etiquetas de Texto ---
    ctx.lineWidth = 1;
    ctx.font = '24px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 'S' en la cámara izquierda
    ctx.fillText('S', leftWallX + 30, yCenter - 15);
    // 'S' en la cámara derecha
    ctx.fillText('S', rightWallX - 30, yCenter - 15);

    // Etiqueta '0°C'
    ctx.font = '20px sans-serif';
    ctx.fillText('0°C', (rightCylStartX + rightWallX) / 2, yBottom + 25);

    // Pie de foto
    ctx.font = '20px "SimSun", "STSong"';
    ctx.fillText('热图 2.11.1', canvas.width / 2, 280);

</script>
</body>
</html>